<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Main Toolbar</title>
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td>
	<a href="home.html">Home</a> &gt; <a href="userguide.html">Using Maqetta</a>
		 &gt; <a href="workspace.html">The Maqetta Workspace</a>
    </td>
    <td class="prevnext">
    <a href="wsLogin.html">Previous</a> / <a href="wsPageEditorCanvas.html">Next</a>
    </td></tr>
</table>

<h1>Maqetta Menu Bar</h1>

<div class="image">
<a href="img/Maqetta-menubar.png" target="_blank"><img alt="image" src="img/Maqetta-menubar.png" style="margin: 1em 1em 0pt 0pt;" width="600" /></a>
<div>Click on the image to enlarge it.</div>
</div>

<p>The Maqetta Menu Bar has "Maqetta" at the left and the current user&#39;s login name on the right (in this case, &quot;localhost user&quot;).
To the right of the login name are four drop-down menu commands, and then the <u>logoff</u> link.</p>

<p>The menu commands are as follows:</p>

<ul style="margin-top: 0pt;" type="disc">
 <li><b>New</b>
 <ul><li>HTML File...</li>
     <li>CSS File...</li>
     <li>JavaScript File...</li>
     <li>Project...</li>
     <li>Theme...</li>
     <li>Folder...</li>
     <li>Review...</li>
 </ul></li>
 <li><b>Open</b>
 <ul><li>File...</li>
     <li>Theme Editor</li>
 </ul></li>
 <li><b>Settings</b>
 <ul><li>Preferences...</li>
 <li>Theme Sets...</li>
 </ul></li>
 <li><b>Help</b>
 <ul><li>Documentation</li>
     <li>Tutorials</li>
     <li>Community</li>
     <li>About Maqetta</li>
 </ul></li>
</ul>

<h3><b>New</b></h3>
<h3 style="margin-top:1em;">HTML File...</h3>

<p>This creates a new User HTML file, which is what you use to create your page designs. The file is created with the tags needed to use the Maqetta widgets and the Maqetta theme files. See <a href="peUserHTML.html">About the User HTML File</a> for more information on source that is auto-generated for HTML files.</p> 

<p>A dialog window opens where you can enter a filename and specify the folder in which to place the new file.  A default filename is provided for convenience, which you can change if desired. 

<h3>CSS File...</h3>

<p>This creates a new CSS file which can be used in addition to or instead of <a href="CreatingStyleRulesWithAppCss.html">app.css</a>, which is provided by Maqetta as the default application CSS file. If you create your own CSS file, you will need to update the &lt;style&gt; tag in your HTML file (see <a href="peSourceEditing.htm">Source Editing</a>) to link to your CSS file. (app.css is already linked in for you.)</p>  

<p>A dialog window opens where you can enter a filename and specify the folder in which to place the new file.  A default filename is provided for convenience, which you can change if desired. 

<h3>JavaScript File</h3>

<p>This creates a new JavaScript file. You will need to update your HTML file (see <a href="peSourceEditing.htm">Source Editing</a>) to link to your JavaScript file.</p> 

<p>A dialog window opens where you can enter a filename and specify the folder in which to place the new file.  A default filename is provided for convenience, which you can change if desired. 

<!-- FIXME: Maybe restore this if we get Save/SaveAs buttons in toolbar for generic New File source editing
<h3>File...</h3>

<p>This creates a new blank file.</p>
-->

<h3>Project...</h3>

<p>Maqetta supports multiple projects. When you launch Maqetta the first time,
you are in the default initial project ("project1"). 
The New Project command creates a new project in your workspace and updates
the Files palette to show the initial contents of your new project.</p>

<p>The New Project dialog includes a checkbox labelled "Eclipse support".
By checking this option, your new project will have a file hierarchy that
matches the file hierarchy used by the Eclipse IDE and Maqetta will
create the various hidden "dot files" (i.e., files whose names begin with the character ".")
that hold Eclipse configuration information.</p>

<h3>Theme...</h3>

<p>This creates a new CSS theme by cloning an existing CSS theme, and then
launches the theme editor to allow you to customize your new theme.</p>

<h3>Folder</h3>

<p>This creates a new folder under the Maqetta root folder or one of its sub-folders.  A default folder name is provided for your convenience, which you can change if desired. 

<h3>Review</h3>

<p>This command initiates a web-based review and commenting session with team members.
<em>(Note: this feature only works in practice when running Maqetta off of a web server.
When installing locally, in most scenarios, you can only successfully invite yourself.)</em></p>

<p>A dialog wizard comes up that allows you to choose which files (i.e., UI mockups) should be reviewed and 
the list of other people (via email addresses) who need to be invited to the review activity.
Upon filling out the fields in the wizard and clicking "Publish", the invitees will
receive email invitations. The emails will include the URL which will launch Maqetta in review mode,
where reviewers can look at the mockups and provide feedback via forum-style plain text comments
or on-screen annotations.</p>

<h3><b>Open</b></h3>
<h3 style="margin-top:1em;">File...</h3>

<p>Opens an existing file under the Maqetta root folder or one of its sub-folders. Scroll through the list to find the desired file, select the file by clicking on it, then click <b>Open</b> to open the file.</p>


<h3>Theme Editor</h3>

<p>Opens the Theme Editor, where you can view or modify the style properties on one of the CSS themes known to the application.</p>

<h3><b>Settings</b></h3>
<h3 style="margin-top:1em;">Preferences...</h3>

<!-- FIXME: project preferences disabled for now. See #3657 and #3658.
<p>The <b>Project</b> preferences allow you customize the setup of projects.
-->
<p>The <b>HTML/Visual Editor</b> preferences allow you to specify the following options:</p>

<table class="palette">
<thead><tr><th colspan="2">Visual Editor Preferences</th></tr></thead>
<tr><th>Snap to nearest widget</th><td>(Default is checked) Whether dynamic snap lines should show during widget drag operations which allow you to snap the edge of one widget to the edge of another widget. Only applies to widgets that use absolute positioning.</td></tr>
<tr><th>When dragging, show possible parents</th><td>(Default is unchecked) Whether to show supplemental drag-time user interface that shows the list of possible parents for the current widget at the current (x,y) location.</td></tr>
<tr><th>Warn on CSS Override</th><td>(Default is checked) Provides a warning message if you attempt to update a style rule from one of the /theme files while making style changes using the <a href="pePropertiesPalette.html">Properties palette</a>.</td></tr>
<tr><th>z-index for sketch mode:</th><td>(Default is 900) When adding widgets using absolute positioning, the z-index value to use for these widgets. (The 999 value helps ensure that widgets placed on top of Dojo Mobile widgets won't be hidden underneath due to lower z-index value).</td></tr>
</table>
<p>The <b>JavaScript/Formatting</b> preferences allow you to specify formatting options that you prefer for the JavaScript that is generated by Maqetta in the <a href="peUserHTML.html">User HTML files</a>.


<h3 style="margin-top:1em;">Theme Sets...</h3>

<p>Brings up a dialog that allows you to define and manage "theme sets", which are a collection of CSS themes and
the association of which theme to use for which device (e.g., use theme A for Android and use theme B for iPhone).</p>

<h3><b>Help</b></h3>
<h3 style="margin-top:1em;">Documentation</h3>

<p>Help brings up the Maqetta Documentation (which you are reading now) in a new browser window.

<h3 style="margin-top:1em;">Tutorials</h3>

<p>Help brings up the the tutorial section of the Maqetta Documentation (which you are reading now) in a new browser window.

<h3>Community</h3>
<p>This brings up the Maqetta Community web site, where you can find information and forums about Maqetta and can supply feedback.</p>

<h3>About Maqetta</h3>
<p>This brings up a small dialog that shows product version number and build number.</p>

<p class="prevnext"><a href="wsLogin.html">Previous</a> / <a href="wsPageEditorCanvas.html">Next</a></p>

</div>  <!-- pagebody -->

<!-- Footer -->
<!--
<iframe src ="footer.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->
</body>
</html>